<template>
  <div id="app">
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
      <!-- 第一个tab标签 -->
      <el-tab-pane label="设备配置" name="deviceConfig">

        <div class="row">
          <span class="title">设备ID</span>
          <el-input v-model="deviceConfig.id"></el-input>
        </div>
        <div class="row">
          <span class="title">水印设置</span>
          <el-select v-model="deviceConfig.watermark">
            <el-option label="是否叠加通道名称" value="0"></el-option>
            <el-option label="是否叠加设备信息,太阳能/电池状态" value="1"></el-option>
          </el-select>
        </div>

      </el-tab-pane>
      <!-- 第二个tab标签 -->
      <el-tab-pane label="摄像头设置" name="camerasConfig" class="camreaNum">
        
        <div v-for="(item,i) in camerasConfig.number" :key="i">
          <div class="row">
            <span class="title">摄像头数量</span>
            <el-input-number v-model="camerasConfig.number" @change="handleChange" :min="1" :max="10" >
            </el-input-number>
          </div>
          <div class="form">

            <div class="row">
              <div class="title">摄像头名称</div>
              <el-input v-model="camerasConfig.name" placeholder="请指定摄像头名称"></el-input>
            </div>
            <div class="row">
              <span class="title">编码模式</span>
              <el-select v-model="camerasConfig.encode" placeholder="请选择编码模式">
                <el-option label="关闭" value="0"></el-option>
                <el-option label="开启" value="1"></el-option>
              </el-select>
            </div>
            <div class="row">
              <span class="title">视频分辨率</span>
              <el-select v-model="camerasConfig.resolving">
                <el-option label="1080P" value="1080P"></el-option>
                <el-option label="720P" value="720P"></el-option>
              </el-select>
            </div>
            <div class="row">
              <span class="title">帧率</span>
              <el-select v-model="camerasConfig.frame" placeholder="请选择帧率">
                <el-option label="模式一" value="1"></el-option>
                <el-option label="模式二" value="2"></el-option>
              </el-select>
            </div>
            <div class="row">
              <span class="title">码流控制</span>
              <el-select v-model="camerasConfig.streamControl" placeholder="请选择码流">
                <el-option label="固定码流" value="1"></el-option>
                <el-option label="可变码流" value="2"></el-option>
              </el-select>
            </div>
            <div class="row">
              <span class="title">码流</span>
              <el-input v-model="camerasConfig.stream" placeholder="码流(Kb/s)"></el-input>(Kb/s)

            </div>

            <div class="row">
              <span class="title">图片分辨率</span>
              <el-select v-model="camerasConfig.picture" placeholder="请选择编码模式">
                <el-option label="1080P" value="1080P"></el-option>
                <el-option label="720P" value="720P"></el-option>
              </el-select>
            </div>

            <div class="row">
              <span class="title">采集间隔</span>
              <el-input name="collection" value="1" v-model="camerasConfig.collection"></el-input>（分钟）

            </div>

          </div>

        </div>
      </el-tab-pane>
      <!-- 第三个tab标签 -->
      <el-tab-pane label="网络设置" name="netConfig">

        <span class="title titleBox" name="有线网络设置">有线网络设置
          <div class="row">
            <span class="title" name="ip">IP地址</span>
            <el-input class="t" v-model="netData.ip"></el-input>
          </div>
          <div class="row">
            <span class="title">子网掩码</span>
            <el-input class="t" v-model="netData.netmask"></el-input>
          </div>
        </span>
        <span class="title titleBox" name="sim1">SIM卡1
          <div class="row">
            <span class="title">主站IP</span>
            <el-input class="t" v-model="netData.mainstationIp"></el-input>
          </div>
          <div class="row">
            <span class="title">端口号</span>
            <el-input class="t" v-model="netData.mainstationPort"></el-input>
          </div>
          <div class="row">
            <span class="title">通讯协议</span>
            <el-select class="t" name="protocol" v-model="netData.protocol">
              <el-option label="国网协议" value="0"></el-option>
              <el-option label="南网协议" value="1"></el-option>
            </el-select>
          </div>
          <div class="row">
            <span class="title">网络模式</span>
            <el-select class="t" v-model="netData.netMode">
              <el-option label="UDP" value="0"></el-option>
              <el-option label="TCP" value="1"></el-option>
            </el-select>
          </div>
        </span>
        <span class="title titleBox">SIM卡2
          <div class="row">
            <span class="title">主站IP</span>
            <el-input class="t" v-model="netData.mainstationIp2"></el-input>
          </div>
          <div class="row">
            <span class="title">端口号</span>
            <el-input class="t" v-model="netData.mainstationPort2"></el-input>
          </div>
          <div class="row">
            <span class="title">通讯协议</span>
            <el-select class="t" v-model="netData.protocol">
              <el-option label="国网协议" value="0"></el-option>
              <el-option label="南网协议" value="1"></el-option>
            </el-select>
          </div>
          <div class="row">
            <span class="title">网络模式</span>
            <el-select class="t" v-model="netData.netMode2">
              <el-option label="UDP" value="0"></el-option>
              <el-option label="TCP" value="1"></el-option>
            </el-select>
          </div>
        </span>

      </el-tab-pane>
      <!-- 第四个tab标签 -->
      <el-tab-pane label="存储管理" name="storage">
        <div class="row">
          <span class="title">视频时长</span>
          <el-input v-model="storage.length"></el-input>

            <el-button  class="storagebotton" name="start" type="primary" plain>开始录像</el-button>
            <el-button  class="storagebotton" name="stop" type="danger" plain>结束录像</el-button>


        </div>
        <div class="row">
          <span class="title">照片存储介质</span>
          <el-select v-model="storage.pictureStorage">
            <el-option label="内部存储" value="0"></el-option>
            <el-option label="SD卡" value="1"></el-option>
          </el-select>
        </div>
        <div class="row">
          <span class="title">视频存储介质</span>
          <el-select v-model="storage.videoStorage">
            <el-option label="内部存储" value="0"></el-option>
            <el-option label="SD卡" value="1"></el-option>
          </el-select>
        </div>

      </el-tab-pane>
      <!-- 第五个tab标签 -->
      <el-tab-pane label="系统管理" name="systemConfig">
        <div class="row">
          <span class="title" name="restore">设备恢复出厂</span>
          <el-button type="warning" @click="dialogVisible = false">恢复</el-button>
          <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>是否恢复出厂</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog> -->
        </div>

      </el-tab-pane>
      <!-- 第六个tab标签 -->
      <el-tab-pane label="系统信息" name="systemMsg">

        <div class="row">
          <span class="title">单片机版本号</span>
          <el-input v-model="systemMsg.deviceVersion" :disabled="true"></el-input>
        </div>
        <div class="row">
          <span class="title">软件版本号</span>
          <el-input v-model="systemMsg.softwareVersion" :disabled="true"></el-input>
        </div>
        <div class="row">
          <span class="title">系统版本号</span>
          <el-input v-model="systemMsg.systemVersion" :disabled="true"></el-input>
        </div>

      </el-tab-pane>

      <!-- 第七个tab标签 -->
      <el-tab-pane label="云台控制" name="cloud">
        <div class="box">
          <div class="top" name="top">
            <el-tooltip class="item" effect="light" content="向上移动" placement="top">
              <el-button type="info">上移</el-button>
            </el-tooltip>
          </div>
          <div class="left" name="left">
            <el-tooltip class="item" effect="light" content="向左移动" placement="left">
              <el-button type="info">左移</el-button>
            </el-tooltip>
          </div>
          <div class="right" name="right">
            <el-tooltip class="item" effect="light" content="向右移动" placement="right">
              <el-button type="info">右移</el-button>
            </el-tooltip>
          </div>

          <div class="down" name="dowm">
            <el-tooltip class="item" effect="light" content="向下移动" placement="left">
              <el-button type="info">下移</el-button>
            </el-tooltip>
          </div>
        </div>
        <div>
          <el-empty class="field" :image-size="200"></el-empty>
          <el-button  class="storagebotton" name="start" type="primary" plain>抓拍</el-button>
          <el-button  class="storagebotton" name="stop" type="danger" plain>保存</el-button>
        </div>


      </el-tab-pane>
    </el-tabs>
    <div class="button">
      <el-button type="primary" @click="submitForm()">确定</el-button>
      <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'deviceConfig',
        // 第一个标签页设置
        deviceConfig: {
          id: '',
          watermark: ''

        },

        // 第二个标签页设置
        camerasConfig: {
          number: '1', //编码模式
          name: '摄像头1', //智能编码
          encode: '0',
          resolving: '1080', //分辨率
          frame: '720P', //帧率
          streamControl: '1', //选择码流
          stream: '', //码流控制
          picture: '720P',
          collection: '0'
        },
        //第三个标签页设置
        netData: {
          ip: '', //IP地址
          netmask: '', //端口
          mainstationIp: '', //主站IP
          mainstationPort: '', //端口号
          protocol: '', //通讯协议
          netMode: '', //网络模式
          mainstationIp2: '', //主站IP
          mainstationPort2: '', //端口号
          protocol2: '', //通讯协议
          netMode2: '' //网络模式
        },
        //第四个标签页设置
        storage: {
          length: '', //视频时长
          record: true,
          pictureStorage: '', //照片存储介质
          videoStorage: '' //视频存储介质
        },
        //第五个标签页
        dialogVisible: 'false', //是否显示
        systemConfig: {},
        //第六个标签页
        systemMsg: {
          deviceVersion: '',
          softwareVersion: '',
          systemVersion: ''
        }
      };
    },

    methods: {
      handleClick(tab, event) {},
      //摄像头数量增减
      handleChange(value) {
        console.log(value);
      },
      // 点击提交
      submitForm() {
        console.log(this.ruleForm);
        console.log(this.camerasConfig);
        console.log(this.netData);
        console.log(this.storage);
        console.log(this.systemInfo);
      },
      //恢复出厂
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f5f5dc;
    margin-top: 20px;
    width: 80%;
    margin: 0 auto;
  }

  .form {
    padding: 10px;
    -webkit-box-shadow: 3px 3px 3px;
    -moz-box-shadow: 3px 3px 3px;
    box-shadow: 1px 3px 20px #DEB887;
  }

  .el-tab-pane {
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .row {
    height: 3rem;
    display: flex;
    align-items: center;

  }

  .title {
    width: 16rem;

  }

  .titleBox {
    box-shadow: 1px 3px 20px #DEB887;
    margin: 1rem 0;
    padding: 1rem;
  }
  .storagebotton{
    margin: 5px;
  }
  .t {
    width: 40rem;
    margin: 10px;
  }

  .button {
    margin-top: 2rem;
    text-align: center;
  }

  .switch {
    position: absolute;
    left: 30px;
  }

  .camreaNum {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;


  }

  /* 云台控制 */
  .box {
    width: 400px;
  }

  .top {
    text-align: center;
  }

  .left {
    float: left;
    width: 60px;
  }

  .right {
    float: right;
    width: 60px;
  }

  .down {
    clear: both;
    text-align: center;
  }

  .field {
    box-shadow: 1px 3px 20px #DEB887;
    width: 600px;
    margin-top: 10px;
  }
</style>
